import Button, { ButtonSize, ButtonType } from "./components/Button"
import Menu from "./components/Menu"
import Icon from "./components/Icon"
import Upload from "./components/Upload"
import MenuItem from "./components/Menu/components/menu_item"
import SubMenu from "./components/Menu/components/sub_menu"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { library } from "@fortawesome/fontawesome-svg-core"
import { fas } from "@fortawesome/free-solid-svg-icons"
import { faCheckSquare, faCoffee, faAirFreshener, faWifi } from "@fortawesome/free-solid-svg-icons"
import { ChangeEvent, useEffect } from "react"
import axios from "axios"
library.add(fas, faCheckSquare, faCoffee)

function App() {
	useEffect(() => {
		axios.get("https://jsonplaceholder.typicode.com/posts/1").then(res => {
			console.log(res.data)
		})
	})

	const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
		const files = e.target.files
		if (files) {
			const uploadFile = files[0]
			const formData = new FormData()
			formData.append(uploadFile.type, uploadFile)
			axios
				.post("/api/posts", formData, {
					headers: {
						"Content-Type": "multipart/form-data",
					},
				})
				.then(res => {
					console.log(res)
				})
				.catch(console.error)
		}
	}

	const handleProgress = (percent: number, file: File) => {
		console.log("handleProgress percent", percent)
	}
	const handleSuccess = (data: any, file: File) => {
		console.log("handleSuccess data", data)
	}
	const handleError = (err: any, file: File) => {
		console.log("handleError err", err)
	}

	return (
		<div className="App">
			<header className="App-header">
				<Button>Hello React!</Button>
				<Button btnType={ButtonType.Primary}>Hello React!</Button>
				<Button size={ButtonSize.Large}>Hello React!</Button>
				<Button btnType={ButtonType.Link} href="http://www.baidu.com" target="blank">
					Baidu Link
				</Button>
				<Button btnType={ButtonType.Link} href="http://www.baidu.com" disabled>
					Baidu Link
				</Button>
				<Button disabled>Hello React!</Button>

				<Button btnType={ButtonType.Danger}>Hello React!</Button>

				<h1>jest</h1>
				<Upload
					action="https://api.bfgxkj.com/business-product/commodityImage/imageUpload"
					onError={handleError}
					onProgress={handleProgress}
					onSuccess={handleSuccess}
					name="custom-filename"
					data={{ key: "val" }}
					headers={{
						authorization: "Bearer 123455",
					}}
					multiple={true}
					drag={true}
				/>

				<Icon icon="arrow-left" theme="primary" size="8x"></Icon>
				<Icon icon={faWifi} theme="secondary" size="8x"></Icon>
				<Icon icon={faAirFreshener} theme="warning" size="8x"></Icon>
				<Icon icon="angry" theme="danger" size="8x"></Icon>

				<hr />
				<input type="file" name="myFile" onChange={handleFileChange} />
				<hr />

				<Menu defaultOpenedSubMenus={["4"]}>
					<MenuItem>菜单项1</MenuItem>
					<MenuItem>菜单项2</MenuItem>
					<MenuItem>菜单项3</MenuItem>
					<MenuItem>菜单项4</MenuItem>
					<SubMenu title="下拉菜单">
						<MenuItem>下拉菜单项1</MenuItem>
						<MenuItem>下拉菜单项2</MenuItem>
						<MenuItem>下拉菜单项3</MenuItem>
						<MenuItem>下拉菜单项4</MenuItem>
					</SubMenu>
				</Menu>

				<Menu mode="vertical" defaultOpenedSubMenus={["4"]}>
					<MenuItem>菜单项1</MenuItem>
					<MenuItem>菜单项2</MenuItem>
					<MenuItem>菜单项3</MenuItem>
					<MenuItem>菜单项4</MenuItem>
					<SubMenu title="下拉菜单">
						<MenuItem>下拉菜单项1</MenuItem>
						<MenuItem>下拉菜单项2</MenuItem>
						<MenuItem>下拉菜单项3</MenuItem>
						<MenuItem>下拉菜单项4</MenuItem>
					</SubMenu>
				</Menu>

				<FontAwesomeIcon size="10x" icon={faCoffee} />
			</header>
		</div>
	)
}

export default App
